@width: 11.73rem;

.com_title {
  p{
    text-align: center;
    &:nth-of-type(1) {
      font-size: 0.5rem;
      color: #db1914;
      font-family: Achafita;
    }
    &:nth-of-type(2) {
      font-size: 0.4rem;
      color: #000;
      margin-top: -0.3rem;
      font-family: OSBold;
    }
  }
}
// bakery 部分
.bakery {
  width: 100%;
  &>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1920px;
    height: 18rem;
    margin: 0 auto;
    .search_box {
      width: 7.6rem;
      height: 0.72rem;
      background: url(../images/bakery_img1.png) no-repeat;
      margin: 0.45rem 0;
      input {
        width: 100%;
        height: 100%;
        border: none;
        background-color:transparent;
        font-size: 0.17rem;
        text-align: center;
        &::placeholder {
          font-size: 0.17rem;
          color: #414141;
        }
      }
    }
    .bakery_items {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      width: 100%;
      .item {
        width: 4.44rem;
        margin-bottom: 0.5rem;
        border-bottom:1px solid #d80702;
        .item_img {
          position: relative;
          width: 100%;
          height: 4.7rem;
          &>img {
            width: 100%;
          }
        }
        .item_msg {
          display: flex;
          justify-content: flex-start;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 2.35rem;
          height: 0.5rem;
          background-color: #d80702;
          .dv1 {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 72%;
            height: 100%;
            font-size: 0.17rem;
            background-color: #d80702;
            color: #fff;
          }
          .dv2 {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 28%;
            height: 100%;
            background-color: #373636;
            img {
              width: 30%;
            }
          }
        }
        .name {
          font-size: 0.21rem;
          font-weight: 700;
          text-align: center;
          margin: 0.3rem 0;
        }
      }
    }
    .loadMore {
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      width: 1.1rem;
      height: 1.1rem;
      background-color: #000;
      border-radius: 50%;
      margin: 0.1rem auto;
      &>div {
        color: #fff;
        text-align: center;
        font-size: 0.15rem;
        font-family: OSBold;
        margin-top: 0.15rem;
      }
      &>img {
        width: 16%;
        margin-top: 0.24rem;
      }
    }
  }
}
// reviews部分
.reviews {
  width: 100%;
  height: 6.85rem;
  background-color: #201f1f;
  &>div {
    position: relative;
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #fff;
    &:hover {
      .btns {
        opacity: 1;
      }

    }
    .imgs {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      img{
        width: 100%;
      }
    }
    .btns {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 60px;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: all 1s;
      .btn_left, .btn_right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        font-size: 30px;
        background-color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        &:hover {
          background-color: rgba(219, 25, 20, 0.5);
          color: #fff;
        }
      }
      .btn_left {
        float: left;
        margin-left: 1.2rem;
      }
      .btn_right {
        margin-right: 1.2rem;
        float: right;
      }
    }
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      // width: 8rem;
      p {
        text-align: center;
      }
      .p1 {
        font-family: Achafita;
        font-size: 40px;
        color: #db1914;
      }
      .p2 {
        font-size: 0.6rem;
        color: #fff;
        font-weight: 700;
      }
      .p3 {
        font-size: 0.15rem;
        color: #dbdbdb;
      }
      .about {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 110px;
        height: 40px;
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
        background-color: #db1914;
        margin: 0 auto;
        margin-top: 0.54rem;
      }
    }
  }
}

// help us 部分
.help {
  width: 100%;
  &>div {
    width: @width;
    // height: 4.35rem;
    margin: 0 auto;
    padding-bottom: 1.1rem;
    .title {
      text-align: center;
      .dv1 {
        font-size: 0.7rem;
        color: #d80702;
        font-family: Achafita;
      }
      .dv2 {
        font-size: 0.4rem;
        color: #141313;
        font-weight: 700;
        margin-top: -0.3rem;
      }
    }
    .text {
      width: 100%;
      p  {
        width: 60%;
        font-size: 0.15rem;
        color: #666;
        margin: 0 auto;
        text-align: center;
        margin-top: 0.3rem;
      }
    }
    .imgs {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 0.35rem;
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 0.6rem;
        height: 0.6rem;
        background-color: #e7e7e7;
        border-radius: 50%;
        margin: 0 0.1rem;
        img {
          // width: 16px;
        }
      }
    }
    .inp_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 78%;
      height: 0.85rem;
      background-color: #e7e7e7;
      margin: 0 auto;
      margin-top: 0.6rem;
      padding: 0 0.14rem;
      #inp {
        width: 80%;
        height: 0.6rem;
        color: #939292;
        &::placeholder {
          font-size: 12px;
          color: #a38f8f;
        }
        padding-left: 0.4rem;
      }
      &>div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
        height: 0.6rem;
        background-color: #db1914;
        color: #fff;
        img {
          padding-left: 0.1rem;
        }
      }
    }
  }
}

@media screen and (max-width: 777px) {

}

@media screen and (max-width: 1350px) {
  .bakery > div .loadMore > div,
  .bakery > div .bakery_items .item .name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .help > div .text p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
@media screen and (max-width: 1024px) {
  .reviews > div .btns .btn_left, .reviews > div .btns .btn_right {
    width: 0.6rem;
    height: 0.6rem;
    font-size: 0.3rem;
  }
  .reviews > div .text .about {
    min-width: 1.1rem;
    // min-height: 0.2rem;
    font-size: .16rem;
  }
  .reviews > div .text .p3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .reviews > div .text .p2,  .reviews > div .text .p1 {
    font-size: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .help > div .inp_box > div img {
    display: none;
  }
  .help > div .inp_box > div span {
    transform: scale(0.8);
    transform-origin: left center;
  }
}
@media screen and (max-width: 550px) {
  .reviews > div .text .about {
    display: none;
  }
  .reviews > div .text .p3 {
    line-height: 14px;
  }
}
@media screen and (max-width: 777px){
  .bakery > div .loadMore > img {
    line-height: 1.1rem;
  }
  .bakery > div .loadMore > div {
    display: none;
  }
  .bakery > div .loadMore {
    justify-content: center;
  }
  .bakery > div .loadMore > img {
    margin: 0;
    width: 40%;
  }
}








